<template>
	<view class="move-view">
		<movable-area>
			<movable-view :x="x" :y="y" direction="all" @change="onChange">
				<view class="tabbar" @tap="toggle">
					{{currentTabbar}}
					<view class=" " :class="[ isRight?(tabbarShow?'rotateTrack':'rotateTracknone'):(tabbarShow?'rotateTrackl':'rotateTracknonel'),isRight?'line-r':'line-l']">
						<view @tap.stop='navto(item)' class="item justify-center align-center" v-for="item,index in newList" :key="index"
							:style="{transform:`rotate(${index * 70}deg)`}">
							<view class="" :style="{transform:`rotate(calc(-${index * 70}deg + ${isRight?'120deg':'-60deg'}))`}">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
			</movable-view>
		</movable-area>
	</view>

</template>
<script>
	import {
		getCurrentInstance
	} from 'vue'
	export default {
		props:{
			tabTitle:'书架'
		},
		data() {
			return {
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				},
				currentTabbar: '书架',
				list: [{
						"pagePath": "/reading/pages/shop/index",
						"iconPath": "static/links.png",
						"selectedIconPath": "static/linksActive.png",
						"text": "书城"
					}, {
						"pagePath": "/reading/pages/bookSearch/index",
						"iconPath": "static/message.png",
						"selectedIconPath": "static/messageActive.png",
						"text": "搜索"
					}, {
						"pagePath": "/reading/pages/book/index",
						"iconPath": "static/homePage.png",
						"selectedIconPath": "static/homePageActive.png",
						"text": "书架"
					},
					{
						"pagePath": "/reading/pages/aboutUs/aboutus",
						"iconPath": "static/mine.png",
						"selectedIconPath": "static/mineActive.png",
						"text": "我的"
					}
				],
				newList: [],
				tabbarShow: false,
				wid:0,
				isRight:true,
			}
		},
		created() {
			// #ifdef VUE3
			const {
				globalProperties: global
			} = getCurrentInstance().appContext.config;
			console.log('globalscreenWidth', global.screenWidth);
			this.x = global.screenWidth
			this.wid = global.screenWidth
			console.log('vue3');
			// #endif
			this.currentTabbar = this.tabTitle
			this.newList = this.list.filter(e => e.text != this.currentTabbar)
			// this.x = 30
			// this.y = 30
		},
		methods: {
			navto(e){
				uni.navigateTo({
					url:e.pagePath
				})
			},
			toggle() {
				this.tabbarShow = !this.tabbarShow
			},
			tap: function(e) {
				this.x = this.old.x
				this.y = this.old.y
				this.$nextTick(function() {
					this.x = 30
					this.y = 30
				})
			},
			onChange: function(e) {
				if(e.detail.x> (this.wid / 2)){
					if(this.isRight){
						
					}else{
						this.isRight = true
						this.newList = this.list.filter(e => e.text != this.currentTabbar)
					}
					
				}else{
					if(this.isRight==false){
						
					}else{
						this.isRight = false
						this.newList = this.newList.reverse()
					}
					
				}
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 轨道旋转 */
	@keyframes rotateTrack {
		0% {
			opacity: 0;
			transform: translate(-50%, -50%) rotate(0deg);
		}
		100% {
			opacity: 1;
			transform: translate(-50%, -50%) rotate(-120deg);
		}
	}

	@keyframes rotateTracknone {
		0% {
			opacity: 1;
			transform: translate(-50%, -50%) rotate(-120deg);
		}
		100% {
			opacity: 0;
			transform: translate(-50%, -50%) rotate(0deg);
		}
	}
	@keyframes rotateTrackl {
		0% {
			opacity: 0;
			transform: translate(-50%, -50%) rotate(-60deg);
		}
		100% {
			opacity: 1;
			transform: translate(-50%, -50%) rotate(60deg);
		}
	}
	
	@keyframes rotateTracknonel {
		0% {
			opacity: 1;
			transform: translate(-50%, -50%) rotate(60deg);
		}
		100% {
			opacity: 0;
			transform: translate(-50%, -50%) rotate(-60deg);
		}
	}
	.rotateTrack {
		animation: rotateTrack .5s ease-in-out 1;
	}

	.rotateTracknone {
		opacity: 0;
		animation: rotateTracknone .5s ease-in-out 1;
	}
	.rotateTrackl {
		animation: rotateTrackl .5s ease-in-out 1;
	}
	
	.rotateTracknonel {
		opacity: 0;
		animation: rotateTracknonel .5s ease-in-out 1;
	}

	.move-view {
		width: 100vw;
		height: 100vh;
		// position: fixed;
		// top: 0;
		// left: 0;
		
	}

	.tabbar {
		position: relative;
		width: 50px;
		height: 50px;
		line-height: 50px;

		.line-r {
			transform-origin: center;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(-120deg);
			position: absolute;
			width: 150px;
			height: 150px;
			border-radius: 50%;

			
		}
		.line-l{
			transform-origin: center;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(60deg);
			position: absolute;
			width: 150px;
			height: 150px;
			border-radius: 50%;
		}
		.item {
			transform-origin: 75px 75px;
			top: 0;
			left: 0;
			position: absolute;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			text-align: center;
			color: #FFF;
			background-color: #007AFF;
		}

	}

	.earch {
		transform-style: preserve-3d;
		position: relative;
		width: 50vw;
		height: 50vw;
		border: solid 0.5px #ffffff;
		border-radius: 50%;
		box-shadow: 0 0 22px #fff;
	}



	movable-area {
		width: 100vw;
		height: 50vh;
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 1000;
		pointer-events: none;
		background-color: #D8D8D800;
	}

	movable-view {
		width: 50px;
		height: 50px;
		background-color: #00aa00;
		text-align: center;
		color: #FFFFFF;
		font-size: 20px;
		border-radius: 50%;
		position: relative;
		z-index: 10000;
		pointer-events: auto;
	}
</style>